<<<<<<< HEAD
import React, { useRef, useState } from "react";
import StoTable, { StoTableApi } from "../components/StoTable/StoTable";
import { getStudents } from "../common/mockdata";

const students = getStudents(10);

let page = 1;

const formatter = {
  avatar: (student: any) => (
    <a href={`/${student.id}`}>
      <img src={student.avatar} alt="" />
    </a>
  ),

  name: (student: any) => (
    <a style={{ fontWeight: "bold" }} href={`/${student.id}`}>
      {student.name}
=======
import React from "react";
import StoTable from "../components/StoTable";

const students = [
  {
    id: 1,
    name: "张无忌",
    avatar: "/vite.svg",
    age: 20,
    gender: "男",
    score: 85,
  },
  {
    id: 2,
    name: "黄蓉",
    avatar: "/vite.svg",
    age: 22,
    gender: "女",
    score: 92,
  },
  {
    id: 3,
    name: "令狐冲",
    avatar: "/vite.svg",
    age: 19,
    gender: "男",
    score: 78,
  },
  {
    id: 4,
    name: "杨过",
    avatar: "/vite.svg",
    age: 21,
    gender: "男",
    score: 88,
  },
  {
    id: 5,
    name: "小龙女",
    avatar: "/vite.svg",
    age: 23,
    gender: "女",
    score: 95,
  },
  {
    id: 6,
    name: "任盈盈",
    avatar: "/vite.svg",
    age: 20,
    gender: "男",
    score: 81,
  },
  {
    id: 7,
    name: "岳灵珊",
    avatar: "/vite.svg",
    age: 18,
    gender: "女",
    score: 73,
  },
  {
    id: 8,
    name: "陆小凤",
    avatar: "/vite.svg",
    age: 24,
    gender: "男",
    score: 90,
  },
  {
    id: 9,
    name: "赵敏",
    avatar: "/vite.svg",
    age: 22,
    gender: "女",
    score: 87,
  },
  {
    id: 10,
    name: "倚天剑",
    avatar: "/vite.svg",
    age: 21,
    gender: "男",
    score: 79,
  },
];

const formatters = {
  name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,
  avatar: (key: string, item: any) => (
    <a href={`/${item.id}`}>
      <img style={{ width: 40 }} src={`${item[key]}`} alt="" />
>>>>>>> dev-rollup
    </a>
  ),
};

<<<<<<< HEAD
export default function TableDemo() {
  // const [page, setPage] = useState(1);

  // useRef<子组件暴露出来的API类型>
  const childRef = useRef<StoTableApi>(null);

  return (
    <div style={{ width: 1000 }}>
      <h3>TableDemo</h3>
      <button onClick={() => childRef.current!.turnToPage(--page)}>
        上一页
      </button>
      <button onClick={() => (childRef.current as any).turnToPage(++page)}>
        下一页
      </button>

      <StoTable
        ref={childRef}
        data={students}
        pageSize={10}
        sortableKeys={["id", "name", "age", "gender"]}
        formatter={formatter}
        currentPage={page}
=======
function TableDemo() {
  return (
    <div>
      <h3>TableDemo</h3>
      <StoTable
        arr={students}
        width={800}
        formatters={formatters}
        sortables={Object.keys(students[0])}
>>>>>>> dev-rollup
      ></StoTable>
    </div>
  );
}
<<<<<<< HEAD
=======

export default TableDemo;
>>>>>>> dev-rollup
